<template>
  <div>
    <div class="states-type">
      <span class="type-title">项目地区:</span>
      <div class="btns" :class="{'display_':regionType}">
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-type-item"
          :class="{ isActive: regionChange == item.value }"
          v-for="(item,index) in regionoptions"
          :key="index"
          @click="regionItem(item,index)"
        >
          {{ item.label }}
        </button>
      </div>
      <div class="operation">
        <span class="pointer" v-if="regionType" @click="regionType=false">更多<i class="ri-arrow-down-s-line"></i></span>
        <span class="pointer" v-else @click="regionType=true">收起<i class="ri-arrow-up-s-line"></i></span>
      </div>
    </div>
    <div class="row col-md-12" style="margin-top:10px;">
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >公司行业</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in industry" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >发文单位</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in issuingUnit" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group row">
          <label class="col-md-4 padding-right col-form-label col-offset-1"
            >选择年份</label
          >
          <div class="col-md-8">
            <select class="form-control .col-md-offset-2">
              <option v-for="(item,index) in selYear" :key="index">{{item.label}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <policyTransaction />
  </div>
</template>
<script>
import policyTransaction from "./policyTransaction";
import {cityData} from "../../../util/options";
export default {
  components: {
    policyTransaction,
  },
  data () {
    return {
      // 行业筛选
      industry: [
        {
          label: '不限',
          value: '不限',
        },{
          label: '科学研究和试验发展',
          value: '科学研究和试验发展',
        },{
          label: '水利、环境和公共设施管理业',
          value: '水利、环境和公共设施管理业',
        },{
          label: '信息传输、软件和信息技术服务业',
          value: '信息传输、软件和信息技术服务业',
        },{
          label: '制造业',
          value: '制造业',
        },{
          label: '技术服务业',
          value: '技术服务业',
        },{
          label: '农、林、牧、渔业',
          value: '农、林、牧、渔业',
        },{
          label: '交通运输、仓储和邮政业',
          value: '交通运输、仓储和邮政业',
        },{
          label: '卫生和社会工作',
          value: '卫生和社会工作',
        },{
          label: '批发和零售业',
          value: '批发和零售业',
        },{
          label: '租赁和商务服务业',
          value: '租赁和商务服务业',
        },{
          label: '建筑业',
          value: '建筑业',
        },{
          label: '文化、体育和娱乐业',
          value: '文化、体育和娱乐业',
        },{
          label: '金融业',
          value: '金融业',
        },{
          label: '教育',
          value: '教育',
        },{
          label: '电力、热力、燃气及水生产和供应业',
          value: '电力、热力、燃气及水生产和供应业',
        },{
          label: '社会保障',
          value: '社会保障',
        },{
          label: '住宿和餐饮业',
          value: '住宿和餐饮业',
        },{
          label: '采矿业',
          value: '采矿业',
        },{
          label: '房地产业',
          value: '房地产业',
        },{
          label: '居民服务、修理和其他服务业',
          value: '居民服务、修理和其他服务业',
        },{
          label: '其他',
          value: '其他',
        }
      ],
      // 发文单位
      issuingUnit: [
        {
          label: '全部',
          value: '全部',
        },{
          label: '科技部',
          value: '科技部',
        },{
          label: '国务院',
          value: '国务院',
        },{
          label: '发改委',
          value: '发改委',
        },{
          label: '工信部',
          value: '工信部',
        },{
          label: '商务部',
          value: '商务部',
        },{
          label: '教育部',
          value: '教育部',
        },{
          label: '市场监管管理局',
          value: '市场监管管理局',
        },{
          label: '生态环境部',
          value: '生态环境部',
        },{
          label: '农业农村部',
          value: '农业农村部',
        },{
          label: '人社部',
          value: '人社部',
        },{
          label: '税务局',
          value: '税务局',
        },{
          label: '交通运输部',
          value: '交通运输部',
        },{
          label: '住建部',
          value: '住建部',
        },{
          label: '林草局',
          value: '林草局',
        },{
          label: '能源局',
          value: '能源局',
        },{
          label: '自然资源部',
          value: '自然资源部',
        },{
          label: '中共中央',
          value: '中共中央',
        },{
          label: '人民银行',
          value: '人民银行',
        },{
          label: '文旅部',
          value: '文旅部',
        },{
          label: '医疗保险局',
          value: '医疗保险局',
        },{
          label: '国资委',
          value: '国资委',
        },{
          label: '海关总署',
          value: '海关总署',
        },{
          label: '证监会',
          value: '证监会',
        },{
          label: '公安部',
          value: '公安部',
        },{
          label: '体育局',
          value: '体育局',
        },{
          label: '银保监会',
          value: '银保监会',
        },{
          label: '民政部',
          value: '民政部',
        }
      ],
      // 选择年份
      selYear: [
        {
          label: '全部',
          value: '全部',
        },{
          label: '2022年',
          value: '2022年',
        },{
          label: '2021年',
          value: '2021年',
        },{
          label: '2020年',
          value: '2020年',
        },{
          label: '2019年',
          value: '2019年',
        },{
          label: '2018年',
          value: '2018年',
        },{
          label: '2017年',
          value: '2017年',
        },{
          label: '2016年',
          value: '2016年',
        },{
          label: '2015年',
          value: '2015年',
        },{
          label: '2014年',
          value: '2014年',
        },{
          label: '2013年',
          value: '2013年',
        },{
          label: '2012年',
          value: '2012年',
        }
      ],
      regionoptions: cityData,
      regionType: true,
      regionChange: '全国',
    }
  },
  methods: {
    // 项目地区
    handleChangeregion(v){
      console.log(v);
    },
    regionItem(item,index){
      console.log(item,index);
      if(item.value!='全国'&&item.value!='全省'&&item.children){
        this.regionChange = item.children[0].value
        this.regionoptions = item.children
      }else{
        this.regionChange = item.value
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  display: flex;
  .type-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 80px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  .time-title {
    display: inline-block;
    color: #74788d;
    margin-right: 10px;
    min-width: 65px;
    padding-top: 4px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.btns{
  width: 85%;
  overflow: hidden;
}
.display_{
  height: 38px;
}
.operation{
  width: 9%;
  text-align: right;
  padding-top: 2px;
  i{
    vertical-align: bottom;
  }
}
.padding-right {
  padding-right: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.row {
  ::v-deep .el-input__inner {
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
  }
  ::v-deep .el-cascader,
  ::v-deep .el-input__icon,
  ::v-deep .el-range-separator {
    line-height: 1.7rem;
  }
  input,
  select {
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
.col-md-12,.col-md-8,.col-md-10{
  padding-left: 0;
}
</style>
